<template>
  <div id="container"></div>
</template>

<script>
import { getAddrApi } from "../api/map";
import { getHotels } from "../api/map";
export default {
  name: "mapSet",
  data() {
    return {
      userId: 1,
      user: { lng: 0.0, lat: 0.0 }, //用户当前地址信息
      location: { lng: 0.0, lat: 0.0, addr: "" }, //用户设置的地址信息，经纬度和返回的结构化地址
      map: {},
    };
  },
  methods: {

    //获取用户标记处地址--测试成功
    getCode() {
      var self = this;
      var map = new BMapGL.Map('container');
      map.centerAndZoom(new BMapGL.Point(self.user.lng, self.user.lat), 15);
      // map.centerAndZoom(new BMapGL.Point(104.28139696435632, 30.56269784099964), 15);
      map.enableScrollWheelZoom(true);
      //点标记
      var point = new BMapGL.Point(self.user.lng, self.user.lat);
      var marker = new BMapGL.Marker(point, {
        enableDragging: true
      });
      map.addOverlay(marker);
      // 地址解析
      map.addEventListener('click', function (e) {
        //发起地址解析请求
        if (confirm("确认选择这个位置？")) {
          self.location.lng = e.latlng.lng;
          self.location.lat = e.latlng.lat;
          getAddrApi(self.location).then(res => {
            self.location.addr = res.data;
            //让用户进行核实
            if (confirm("您选择的位置是：" + self.location.addr)) {
              //将数据传递给用户个人信息组件
              self.$router.push({
                name:"changeInformation",
                params:{userId:self.userId,addr:self.location.addr}})
            }
          })
        }

      });
    },

    //初始化参数
    getParams() {
      //获取userId
      // this.userId = sessionStorage.getItem("userId");
    },

    //测试
    test() {
      // console.log("user:");
      // console.log(this.user);
      console.log("globalLocation:");
      console.log(this.location);
    },
  },

  mounted() {
    this.getParams();

    //获取用户参数信息，用于初始化地图时定位--由于axios请求是异步请求，所以用到了其结果的方法getCode()必须放到响应方法里面，不然getCode()会先执行，而此时异步请求还未完成，故无法创建地图
    getHotels(this.userId).then((res) => {
      // console.log("用户信息：");
      // console.log(res.map);
      this.user.lng = res.map.userLng;
      this.user.lat = res.map.userLat;
      //将监视函数挂载到vue上
      this.getCode();
    });

  },
};
</script>

<style>
#container {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "微软雅黑";
}
</style>
